<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统提示效果测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            

            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        ul li{
            list-style: none;
        }
        .ul1{
            /**/
            border: 1px solid red;
            margin-top: 45%;
        }
        .ul1 li{
            /**/
            border: 1px solid green;
            font-size: .4831rem;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 1.4493rem;


        }
        .ul1 .title{
            font-weight: 600;
            font-size: .3623rem;
        }
        button{
            border: none;
            border-radius: .1208rem;
            width: 2.4155rem;
            height: .7246rem;
            background: #00c637;
            color: #fff;
        }

    </style>
    <script src="../js/dream-msg.min.js"></script>
    <script src="../js/index3.js"></script>
</head>
<body>
    <section>

        <!-- <audio id="a1" src="../audios/info1.mp3" preload="auto"></audio>
        <audio id="a2" src="../audios/warning1.mp3" preload="auto"></audio>
        <audio id="a3" src="../audios/warning2.mp3" preload="auto"></audio> -->
        
        <ul class="ul1">
            <li class="title">
                站内素材(声音+弹窗+Android震动反馈)
            </li>
            <li>
                <button type="button" onclick="f1(1)">通知1</button>
            </li>
            
            <li>
                <button type="button" onclick="f1(2)">成功1</button>
            </li>

            <li>
                <button type="button" onclick="f1(3)">警告1</button>
            </li>

            <li>
                <button type="button" onclick="f1(4)">错误1</button>
            </li>

            <li>
                <button type="button" onclick="f1(5)">加载1</button>
            </li>

            <li class="title">
                站外素材(声音+弹窗+Android震动反馈)
            </li>
            <li>
                <button type="button" onclick="f1(6)">通知2</button>
            </li>
            
            <li>
                <button type="button" onclick="f1(7)">成功2</button>
            </li>

            <li>
                <button type="button" onclick="f1(8)">警告2</button>
            </li>

            <li>
                <button type="button" onclick="f1(9)">错误2</button>
            </li>

            <li>
                <button type="button" onclick="f1(10)">加载2</button>
            </li>

        </ul>
    </section>



























    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>
